HTML5幻灯片库reveal.js使用

介绍

最近在准备一个团队内部的分享，觉得powerpoint写幻灯片太麻烦，效率太低。作为前端，就想到是否可以使用页面来做幻灯片。于是就去搜索了下有没有HTML5实现幻灯片的工具。经过对比，最后选择了了reveal.js来实现幻灯片。
reveal.js是一个用于实现幻灯片效果的库。使用该库。
github地址：github
提供了页面编辑功能：slides.com
官方demo: demo
我自己做的PPT地址：vuejs-ppt

特点

reveal.js有一下几个特点：

• 支持标签来区分每一页幻灯片

• 可以使用markdown来写内容

• 支持pdf的导出

• 支持演说注释

• 提供JavaScript API来控制页面

• 提供了多个默认主题和切换方式

幻灯片实现步骤

1. 从reveal.js上下载压缩包，并解压

2. 进入reveal.js文件夹，直接修改index.html文件就可以

3. 编辑后好，打开页面就可以看到PPT的内容。 按下S键，会打开时间，下一张PPT，Notes等信息的页面，方便演示PPT

幻灯片内容实现方法

幻灯片的内容需要包含在<div class="reveal"> <div class="slides">的标签中。
一个section是一页幻灯片。当section包含在section中时，是一个纵向的幻灯片。
怎么理解呢？ 可以这样理解：横向的幻灯片代表一章，纵向的幻灯片代表一章中的一节。那么横向的幻灯片在播放时是左右切换的，而纵向的幻灯片是上下切换的。For example:

<div class="reveal">
    <div class="slides">
        <section>Single Horizontal Slide</section>
        <section>
            <section>Vertical Slide 1</section>
            <section>Vertical Slide 2</section>
        </section>
    </div>
</div>

html实现内容

标题和正文

section中的内容就是幻灯片的内容，你可以使用h2标签标示title, p表示内容。需要红色的字体可以直接设置style的color为red。
当某一页需要特殊背景色，可以使用data-background在section上设置, data-background-transition表示背景的过渡效果。For example:

<section data-background-transition="zoom" data-background="#dddddd">

如果需要正文一段一段出现。可以使用fragment。For Example:

<p class="fragment"></p>

代码

reveal.js使用highlight.js来支持代码高亮。可以直接写code标签来实现, data-trim表示去除多余的空格。For Example:

<pre><code data-trim>
  console.log('hello reveal.js!');
</code></pre>

注释

在演说时，会用到注释，对于注释，可以通过<aside class="notes">来实现。For Example:

<aside class="notes">
  这里是注释。
</aside>

在幻灯片页面，按下s键，就可以调出注释页面，注释页面包含了当前幻灯片，下一章幻灯片，注释，以及幻灯片播放时间。

markdown实现

reveal.js不仅支持html表示来实现内容， 还可以通过markdown来实现内容。使用markdown实现内容时，需要对section标示添加data-markdown属性，然后将markdown内容写到一个text/template脚本中。For Example:

<section data-markdown>
    <script type="text/template">
        ## Page title

        A paragraph with some text and a [link](http://hakim.se).
    </script>
</section>

背景色，fragment功能的实现，可以通过注释来实现。For Example:

<section data-markdown>
    <script type="text/template">
    <!-- .slide: data-background="#ff0000" -->
        - Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
        - Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
    </script>
</section>

外置md文件

reveal.js可以引用一个外置的markdown文件来解析。For Example:

<section data-markdown="example.md"  
         data-separator="^\n\n\n"  
         data-separator-vertical="^\n\n"  
         data-separator-notes="^Note:"  
         data-charset="iso-8859-15">
</section>

分页实现

一个markdown文件中可以连续包含多个章内容。可以在section中通过属性data-separator, data-separator-vertical来划分章节。For Example:

<section data-separator="---" data-separator-vertical="--"  >
  <script type="text/template">
    # 主题1
    - 主题1-内容1
    - 主题1-内容2
    --
    ## 主题1-内容1
    内容1-细节1
    --
    ## 主题1-内容2
    内容1-细节2
    ---
    # 主题2
  </script>
</section>

注释

对section添加 data-separator-notes="^Note:"属性，就可以指定Note:后面的内容为当前幻灯片的注释。For Example:

# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.

PDF导出

可以利用浏览器保存为pdf的功能来实现pdf的转化。步骤是

1. 再url后面添加print-pdf参数，访问后，页面会去加载打印用的css文件，页面效果就是pdf的样式。

2. 右键选择打印。设置为保存pdf。

我试过保存pdf的功能，有内容会重叠，怀疑是样式没有处理好。

多主题

reveal.js提供了多种样式。可以通过引用不同的主题来实现。具体主题查看reveal.js/css/theme下的css文件。

总结

用reveal.js来实现幻灯片，可以只关注内容，忽略各种切换效果。而且可以使用markdown来实现，大大提高了编写效率。对于最后生成的html文件，可以部署到服务器，这样只需要网络就可以进行分享，不需要使用U盘拷来拷去了。